<template>
    <div id="app">
      <el-container>
          <el-container style="margin-left: 20px;">
              <el-aside>
                  <el-card :body-style="{ padding: '0px' }">
                      <img src="../../assets/img/background.jpg" class="image">
                      <div class="bottom clearfix">
                          <span class="introduction" style="font-size: 1.5em;">专辑简介</span>
                      </div>
                      <div class="bottom clearfix">
                          <p class="introduction margin-left15">{{ songList.introduction }}</p>
                      </div>
                      <div class="bottom clearfix">
                          <el-button type="primary"><i class="el-icon-download el-icon--left">下载这首歌</i></el-button>
                      </div>
                      <div class="bottom clearfix">
                          <el-button type="primary" size="small"><i class="el-icon-upload el-icon--left">上传音乐</i></el-button>
                      </div>
                      <div style="margin-top: 100%;line-height: 100px;">
                      </div>
                  </el-card>
              </el-aside>
              <el-main style="white-space: pre-line;">
                <div class="singel-main">
                  <div class="singel-top">
                    <div class="bck-img">
                      <img
                        :src="songList.pic"
                        alt
                        style="width: 100%; filter: blur(80px); border-radius: 50%"
                      />
                    </div>
                    <div class="singel-play-img">
                      <div :class="{ playBar: isPlaying, playBarReverse: !isPlaying }" ref="playBar">
                        <img src="../../assets/img/music_bar/player_bar.png" />
                      </div>
                      <div
                        class="play-disc"
                        ref="playDisc"
                         :style="{ animationPlayState: isPlaying ? 'running' : 'paused' }"
                      >
                        <img src="../../assets/img/music_bar/disc.png" style="width: 350px; height: 350px" />
                        <img
                          style="
                            position: absolute;
                            top: 22%;
                            left: 22%;
                            width: 195px;
                            height: 195px;
                            border-radius: 50%;
                          "
                          src="../../assets/img/music_bar/pic.jpg"
                          alt
                        />
                      </div>
                    </div>
                    <div class="singer-text" v-if="showLyric">
                      <div class="singel-title">
                        <span
                          style="font-size: 20px; font-weight: 500; color: #409EFF"
                          >{{ songList.name }}</span
                        >
                        <span
                          style="border: 1px solid red; font-size: 12px; color: red; padding: 1px 4px"
                          >标准音质</span
                        >
                      </div>
                      <div style="margin: 19px 0; fontsize: 13px">
                        <div
                          style="
                            display: inline-block;
                            width: 140px;
                            color: #409EFF;
                            margin-right: 5%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                          ">
                          <span style="color: #409EFF">专辑:</span>
                          <span style="cursor: pointer">{{ songList.introduction }}</span>
                        </div>
                        <div
                          style="
                            display: inline-block;
                            color: #409EFF;
                            width: 170px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;
                          ">
                          <span style="color: #409EFF">歌手:</span>
                          <span style="cursor: pointer" >{{ songList.name }}</span>
                        </div>
                      </div>
                      <div class="lyric">
                        <!--歌词-->

                        <div class="showLyric" ref="lyricScroll">
                          <ul ref="lyric" v-if="lrcObject.length > 1">
                            <li
                              v-for="(item, index) in lrcObject"
                              :key="index"
                              :style="{ color: lyricIndex === index ? 'red' : '#409EFF' }"
                              :ref="[lyricIndex === index ? 'lyricRef' : '']"
                            >
                              {{ item.c }}
                            </li>
                          </ul>
                          <div v-else>纯音乐，请您欣赏</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                  <!-- <span style="margin-left: 20%; color: #409EFF;">{{songList.lyric? songList.lyric : '暂无歌词'}}</span> -->
              </el-main>
          </el-container>
      </el-container>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'musicPlay',
  data () {
    return {
      currentDate: '',
      // 歌词
      lyrics: '',
      // 存放歌词数组
      lrcObject: [],
      lyricIndex: 0,
      timerId: 0,
      showLyric: false,
      isPlaying: false
    }
  },
  methods: {
    goBack () {
      console.log('go back')
    },
    send () {
      this.showLyric = !this.showLyric
    },
    isPlay () {
      this.isPlaying = !this.isPlaying
    },
    // 解析歌词
    createLrcObj (lrc) {
      var oLRC = {
        ms: [] // 歌词数组{t:时间,c:歌词}
      }
      if (lrc.length === 0) return
      var lrcs = lrc.split('\n') // 用回车拆分成数组 (每一句歌词都用换行隔开了)
      for (let i in lrcs) {
        // 遍历歌词数组
        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, '') // 去除前后空格
        var arr = lrcs[i].match(/\[(\d+:.+?)\]/g) // 提取时间字段，可能有多个
        var start = 0
        for (let k in arr) {
          start += arr[k].length // 计算歌词位置 长度叠加
        }
        var content = lrcs[i].substring(start) // 获取歌词内容 相当于减去时间字符串的长度剩下的就是内容
        for (let k in arr) {
          var t = arr[k].substring(1, arr[k].length - 1) // 取[]间的内容
          // var t = arr[k]
          var s = t.split(':') // 分离:前后文字 便于计算成毫秒数
          oLRC.ms.push({
            // 对象{t:时间,c:歌词}加入ms数组
            // t: t,
            t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
            c: content === '' ? '\n' : content
          })
        }
      }
      oLRC.ms.sort(function (a, b) {
        // 按时间顺序排序
        return a.t - b.t
      })
      this.lrcObject = oLRC.ms
    }
  },
  props: {
    formDisabled: {
      type: Boolean,
      require: true
    },
    songList: {
      type: Object,
      require: true
    }
  },
  mounted: function () {
    this.createLrcObj(this.songList.lyric)
  },
  computed: {
    ...mapGetters([
      // 当前进度条
      'nowDuration'
    ])
  },
  watch: {
    value (newVal, oldVal) {
      this.showMask = newVal
    },
    showMask (val) {
      this.$emit('input', val)
    },
    closeMask () {
      this.showMask = false
    },
    songList (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.createLrcObj(this.songList.lyric)
      }
    },
    // 歌曲进度条变化
    nowDuration () {
      // 对每次进来的进度条进行判断
      // 跟下一句台词时长是否匹配,如果匹配则当前高亮的索引值+1
      // 使用循环找到最接近当前播放时间的歌词
      for (let i = 0; i < this.lrcObject.length; i++) {
        // 这里使用小于符号判断是为了 保证回退音乐进度事件的效果实现性
        if (this.nowDuration <= parseFloat(this.lrcObject[i].t)) {
          if (this.lyricIndex === i - 1) {
            break
          }
          // 找到比当前时间点 大一点的后一位的歌词的索引值
          this.lyricIndex = i - 1
          // 动态绑定ref 根据距离顶部不同的位置来控制歌词滚动 (原生的滚动条动画效果未实现，需要的话可能需要换其他滚动条，eg:bater-scroll)
          // 这里加入了一个效果就是滑下去查看歌词时，不会自动滑动 只有到了高亮显示在可视区才会滚动
          if (this.$refs.lyricRef[0].offsetTop > 100) {
            this.$refs.lyricScroll.scrollTop = this.$refs.lyricRef[0].offsetTop - 100
          } else if (this.$refs.lyricRef[0].offsetTop < -100) {
            this.$refs.lyricScroll.scrollTop = this.$refs.lyricRef[0].offsetTop + 100
          }
          // 如果当前是最后一句歌词 代表歌曲要放送结束了 将我们的lyricIndex(当前歌词索引值还原成0便于下一曲使用)
          if (this.lyricIndex === this.lrcObject.length - 1) {
            this.lyricIndex = 0
          }
          break
        }
      }
    }
  }
}
</script>

<style scoped>
.el-header {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    margin-top: 20px;
  }

  .el-aside {
    background-color: #ffffff;
    color: #333;
  }

  .el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    padding: 0px;
  }
  main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 500px;
    border: solid 0px #e9ecf1;
    background-color: #fcfcfc;
}

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .introduction {
       float: left;
       margin: 10px;
       color: #409EFF;
  }

  .margin-left5 {
      margin-left: 25px;
  }

  p {
      text-indent:2em;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }

  .singer-left {
  width: 65%;
}
.singer-right {
  width: 30%;
  margin-left: 20px;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #cecdd3;
  border-radius: 3px;
}
li {
  margin-top: 15px;
  list-style: none;
}
.singel-back {
  position: absolute;
  top: 0;
  right: 0;
}
.bck-img {
  position: absolute;
  width: 50%;
  top: 0;
  left: 40%;
  transform: translateX(-50%);
  z-index: 0;
}
.lyric {
  position: relative;
  z-index: 199;
  /* overflow: auto;
  max-height: 320px;
  width: 400px;
  border: 1px solid red; */
}
.singer-text {
  width: 50%;
  margin-left: 15%;
}
.singel {
  position: fixed;
  width: 100%;
  height: 100vh;
  padding-top: 20px;
  margin-top: -20px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.singel:hover {
  overflow-y: overlay;
}
.singel-main {
  margin-left: 8%;
  margin-top: 2%;
  width: 70%;
}
.singel-top {
  display: flex;
  position: relative;
  margin-bottom: 5%;
}
.singel-play-img {
  margin-left: 35px;
  position: relative;
}
/* 拨动片 */
.playBar {
  position: absolute;
  top: 0px;
  left: 55%;
  z-index: 10;
  transform: rotate(-45deg);
  animation-name: bar;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
}
@keyframes bar {
  to {
    transform: rotate(0deg);
  }
}
.playBarReverse {
  position: absolute;
  top: 0px;
  left: 55%;
  z-index: 10;
  transform: rotate(0deg);
  animation-name: rebar;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transform-origin: 0 0;
}
@keyframes rebar {
  to {
    transform: rotate(-45deg);
  }
}
/* 唱片 */
.play-disc {
  margin-top: 50px;
  animation-name: record;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes record {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes record {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.showLyric {
  width: 350px;
  height: 385px;
  overflow: hidden;
  margin-top: 25px;
  transition: scrollTop 0.3s;
}
.showLyric:hover {
  overflow-y: overlay;
}
</style>
